<template>
  <div class="user">
    <el-container>
      <el-header class="sticky top-0 z-40 bg-white border-b flex justify-between items-center">
        <el-avatar
          icon="el-icon-user-solid"
          class="ml-2"
        />
        <div class="ml-2 text-xl">
          {{ ent.ename }}
        </div>
        <div class="text-lg ml-auto mr-2">
          <i class="el-icon-date" />
        </div>
        <div v-if="this.$store.state.server.time.loading===1">
          <i class="mr-4 el-icon-loading" />
        </div>
        <div
          v-else
          class="mr-4 text-gray-500"
        >
          {{ get_date }}
        </div>
        <div>
          <el-button
            type="info"
            plain
            icon="el-icon-refresh"
            @click="refresh"
          >
            刷新
          </el-button>
          <el-button
            type="danger"
            plain
            icon="el-icon-switch-button"
            @click="logout"
          >
            退出
          </el-button>
        </div>
      </el-header>
      <el-container class="">
        <el-aside
          class="overflow-visible"
          width="250px"
        >
          <div class="bg-white sticky top-60px">
            <user-aside class="h-(screen-60) overflow-y-auto" />
          </div>
        </el-aside>
        <el-main class="bg-white bg-opacity-50">
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import UserAside from '../components/user-aside.vue'

export default {
  name: 'User',
  components: {
    UserAside
  },
  data () {
    return {
      ent: this.$store.state.ent,
      server_time: this.$store.state.server.time.val
    }
  },
  computed: {
    get_date: function () {
      const d = new Date(this.server_time)
      return d.getFullYear() + '-' +
      (d.getMonth() > 8 ? d.getMonth() + 1 : '0' + (d.getMonth() + 1)) + '-' +
      (d.getDate() > 9 ? d.getDate() : '0' + d.getDate())
    }
  },
  methods: {
    refresh: function () {
      this.axios.get('/api/ent/detail', {
        headers: {
          token: this.$store.state.ent.token
        }
      }).then(function (r) {
        if (r.data.success) {
          this.$store.commit('loadEntData', r.data.detail)
        } else {
          this.$store.commit('logout')
          this.$$router.push('/login')
        }
      }.bind(this))

      this.axios.get('/api/ent/getTime', {
        headers: {
          token: this.$store.state.ent.token
        }
      }).then(function (r) {
        if (r.data.success) {
          localStorage.setItem('trace-server-time', r.data.detail)
          localStorage.setItem('trace-last-time', ~~(Date.now() / 1000))
          this.$store.commit('setServerTime', r.data.detail)
        } else {
          this.$store.commit('logout')
          this.$$router.push('/login')
        }
      }.bind(this))

      location.reload()
    },
    logout: function () {
      this.$store.commit('logout')
      this.$router.push('/user/login')

      localStorage.removeItem('trace-last-time')
    }
  }
}
</script>
